<!--
@description    指标规则管理
@author         秦俊强
@email          458112865@qq.com
@create         2020-03-20 20:30
-->

<template>
  <a-card :bordered="false">

    <!-- 查询&编辑 start -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="14" :sm="8">
            <a-input-search placeholder="关键字查询" enterButton="查询"
                            v-model="querySearch.searchText" allowClear
                            style="width: 350px;"
                            @search="search"
                            @pressEnter="search"
                            @change="clearText"  />
          </a-col>

          <a-col :md="10" :sm="8">
            <div class="table-operator">
              <!-- TODO 暂时不提供删除功能 -->
              <!--<a-button type="danger" icon="delete" ghost :disabled="selectedRowKeys.length === 0">删除规则</a-button>-->

              <a-button type="primary" icon="plus" ghost
                        @click="handleEdit()">新增规则</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询&编辑 end -->


    <!-- table区域-begin -->
    <div class="container-box">

      <!-- 提示 -->
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <a-icon type="exclamation-circle" style="margin-top: 4px; margin-right: 5px;" />
        <span> 已选择 </span>
        <span class="count">{{ selectedRowKeys.length }}</span>
        <span> 项</span>
        <a v-if="selectedRowKeys.length > 0"
           @click="clearSelected()" style="margin-left: 10px;" >清空</a>
      </div>

      <!-- 表格内容 -->
      <a-table bordered :loading="loading"
               :columns="tableData.columns"
               :dataSource="tableData.dataSource"
               :scroll="tableData.tableScroll"
               :pagination="{ current: querySearch.pageNo, total: tableData.total, onChange: onChange }"
               :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
        <template slot="action" slot-scope="text, record">
          <span class="edit" @click="handleEdit(record)">编辑</span>
        </template>
      </a-table>
    </div>


    <!-- 弹窗 添加\编辑 -->
    <tkIndexValueRule-modal ref="modalForm" :record="record" :ok="saveRule"></tkIndexValueRule-modal>
  </a-card>
</template>



<script>
  /* 封装通用 api 服务 */
  import { apiService } from '@/api/api.service.js';

  /**
   * api 接口
   *
   * indexRuleDatagrid => 列表查询（支持模糊查询）
   * indexRuleSave => 保存单条规则
   * */
  import { indexRuleDatagrid, indexRuleSave } from '@/api/api.js'

  /* 弹窗添加\编辑规则组件 */
  import TkIndexValueRuleModal from './tkindexvaluerule/TkIndexValueRuleModal';




  export default {
    name: "TkIndexValueRuleList",
    components: { TkIndexValueRuleModal },
    data () {
      return {
        loading: true,

        /* 查询 */
        querySearch: {
          searchText: '',
          pageNo: 1,
          pageSize: 10
        },

        /* 配置表格 */
        tableData: {
          columns: [{
            title: '指标部门',
            align: 'center',
            width: 200,
            dataIndex: 'indexDepartName'
          }, {
            title: '数据标识',
            align: 'center',
            width: 100,
            dataIndex: 'whichData'
          }, {
            title:'数据项编码',
            align: 'center',
            width: 200,
            dataIndex: 'indexValueCode'
          }, {
            title:'数据项名称',
            align: 'center',
            width: 200,
            dataIndex: 'indexValueName'
          }, {
            title:'变量公式',
            align: 'center',
            width: 300,
            dataIndex: 'indexValueRule'
          }, {
            title:'中文公式',
            align: 'center',
            width: 300,
            dataIndex: 'indexValueRuleCn'
          }, {
            title:'公式规则说明',
            align: 'center',
            width: 500,
            dataIndex: 'indexValueRuleComments'
          }, {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 100,
            scopedSlots: { customRender: 'action' }
          }],
          dataSource: [],
          tableScroll: { x: 1900, y: '500px' },
          total: 1
        },

        /* 选中的行 */
        selectedRowKeys: [],

        /* 需要编辑的行 */
        record: ''
      }
    },

    created() { this.getIndexRuleList(); },

    methods: {

      /* 监听表格选中个数的变化 */
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys;
      },

      /* 监听页数变化 */
      onChange(n) {
        this.querySearch.pageNo = n;
        this.getIndexRuleList();
      },

      /* 清空选中 */
      clearSelected() {
        this.onSelectChange([]);
      },

      /* 监听清空搜索 */
      clearText(e) {
        if (!e.target.value) { this.search(); }
      },

      /* 编辑\添加 */
      handleEdit(record) {
        this.record = record || '';
        this.$refs.modalForm.show = true;
      },

      /* TODO 删除 */
      handleDelete() {},

      /* 查询 */
      search() {
        this.querySearch.pageNo = 1;
        this.getIndexRuleList();
      },

      /* 获取规则列表（包括模糊查询） */
      getIndexRuleList() {
        let param = this.querySearch;
        this.loading = true;
        apiService(indexRuleDatagrid(param)).then((res) => {
          this.loading = false;
          this.tableData.dataSource = res.result.records;
          this.tableData.total = res.result.total;
        }).catch((error) => {
          this.loading = false;
          this.$message.error(error.message);
        });
      },

      /* 保存/更新 单条规则 */
      saveRule(param) {
        apiService(indexRuleSave(param)).then((res) => {
          this.$message.success('操作成功');
          this.$refs.modalForm.show = false;
          this.getIndexRuleList();
        }).catch((error) => {
          this.loading = false;
          this.$message.error(error.message);
        });
      }

    }
  }
</script>


<style lang="less" scoped>
  /deep/.table-page-search-wrapper {
    margin-bottom: 10px;
  }
  /deep/.table-operator {
    float: right;
    margin-bottom: 0;
    button { margin-right: 0; margin-left: 8px; }
  }

  .container-box {
    /deep/.ant-alert { padding-left: 15px; }

    .edit, .count { color: @primary-color; }
    .edit { cursor: pointer; }
    .count { font-weight: bold; }
  }

  /deep/.ant-table-body {
    tr td {
      word-wrap: break-word;
      word-break: break-all;
    }
  }
</style>
